/**
 * string类型的值显示
 */
Vue.component("string", {
    template :
        `
        <div>
            <i-table highlight-row :columns="columns" :data="dealValue"/>
            <Modal v-model="asJson" title="json格式显示...">
                <pre style="white-space: pre-wrap;word-wrap: break-word;">{{asJsonText}}</pre>
            </Modal>
            <input type="hidden" id="copyValue" v-on:click="copy">
        </div>
        `,
    props : ["data"],
    data : function() {
        return {
            columns: [
                {
                    title: "值",
                    key: "value",
                    render: (h, params) => {
                        return `
                        <Poptip trigger="hover" placement="top-start" style="padding: 2px 0px 2px 0px">
                            <div>${h.value}</div>
                            <div slot="content">
                                <i-button type="text" size="small" v-on:click="showAsJson">以json格式查看</i-button>
                                <i-button type="text" size="small" v-on:click="toCopy">复制</i-button>
                            </div>
                        </Poptip>
                        `;
                    }
                }
            ],
            asJson: false,
            asJsonText: ""
        };
    },
    methods : {
        showAsJson: function () {
            this.asJson = true;
            var tempValue;
            try {
                tempValue = JSON.parse(this.data.value);
            }catch (e){
                tempValue = this.data.value;
            }
            this.asJsonText = tempValue;
        },
        copy : function () {
            var that = this, clipboard = new Clipboard("#copyValue", {
                text : function () {
                    return that.data.value;
                }
            });
            clipboard.on("success", function(e) {
                that.$Message.success("value复制成功...");
            });
            clipboard.on("error", function(e) {
                that.$Message.error("value复制失败...");
            });
        },
        toCopy : function () {
            //TODO，不知为啥，直接复制不成功
            document.getElementById("copyValue").click();
        }
    },
    computed : {
        dealValue : function () {
            return [{
                value : this.data.value
            }];
        }
    }
});